<template>
	<view>
		<cu-custom :isBack="true" bgColor="bg-white">
			<block slot="backText"></block>
			<block slot="content"><text>分红权明细</text></block>
		</cu-custom>
		
		<!-- <view class="whole-box" style="background-image: url(https://pingtuan-1251091607.cos.ap-shanghai.myqcloud.com/images/2021/03/10/image_1615357505_aCuJdqd0.png);background-size: 100% 100%;"> -->
		 <view class="whole-box">
			 <view class="cu-bar padding">
			 	<view class="cu-btn round lg w100 text-white" style="background-color: #FF9900;">每天23:00:00发放</view>
				
				
			 </view>
			 
			 <view class="cu-bar padding w100">
			 	<view @tap="showBonus()" class="cu-btn round lg bg-white " style="color: #FF9900;width: 60%;margin: 0 auto;">查看往期分红</view>
			 </view>
			 <view class="new-top-box">
			 	<!-- <image class="top-box-bg" src="@/static/black_bg/stander-box.png" mode="aspectFill"></image> -->
			 	<view class="top-box-content">
			 		<view class="note-price">
			 			<text class="note">平台已释放分红权</text>
			 			<text class="price ">{{detail && detail.total_integral > 0 ? detail.total_integral : 0}}</text>
			 		</view>
					<view class="note-price">
						<text class="note">平台未释放分红权</text>
						<text class="price ">{{detail && detail.left_integral > 0 ? detail.left_integral : 0}}</text>
					</view>
			 	</view>
				
				<view class="top-box-content" style="margin-top: 100px;">
					<view class="note-price">
						<text  class="note" style="color: #000000;font-weight: 100!important;font-size: 14px;">当前待发放平台分红池</text>
						<text class="price " style="width: 100px;height: 30px;background-color: #1A181E;margin: 0 auto;line-height: 30px;color: #ffffff;font-size: 12px;margin-top: 20px;">{{detail && detail.ordermoney > 0 ? detail.ordermoney : 0}}元</text>
					</view>
				</view>
			 </view>
			 
			<view class="gold-black-box">
				<view class="top-box">
					<view class="top-box-content">
						<view class="note-price">
							<text class="note">我的分红权</text>
							<text class="price text-price111">{{detail && detail.money_weight > 0 ? detail.money_weight : 0}}</text>
						</view>
					</view>
				</view>

				<view class="list">
					<scroll-view scroll-y :style="'height:'+scrollHeight+'px'" @scrolltolower="getMore">
						<block v-for="(item,i) in list" :key="i">
							<view class="my-data-box">
								<!-- <image class="my-data-box-bg" src="@/static/black_bg/stander-box.png" mode="aspectFill"></image> -->
								<view class="my-data-box-content">
									<view class="left-box">
										<view class="title"><text>已收益：{{(item.total_integral - item.left_integral).toFixed(2)}}</text></view>
										<view class="title"><text>预计总收益：{{item.total_integral}}</text></view>
										<view class="time">{{$common.timeFormat(item.created_at)}}
											<text v-if="item.is_finish>0" style="color: #B3B3B3;font-size: 14px;margin-left: 10px;">已完成</text>
											<text v-else style="color: #1A181E;font-size: 14px;margin-left: 10px;">未完成</text>
										</view>
									</view>
									<!-- <view class="num up" >{{item.num}}</view> -->
								</view>
							</view>
						</block>
						<view class="cu-load margin-center text-white" :class="loading?'loading':'over'"></view>
					</scroll-view>
				</view>
				
			</view>
		</view>
	</view>
</template>


<script>
	export default {
		components: {},
		mounted() {
			this.getScrollH()
		},
		data() {
			return {
				theme: this.$config.THEME(),
				title: '我的秒杀券',
				list: [],
				page: 1,
				hasMore: true,
				loading: false,
				detail:[],
				scrollHeight: 100,
				total_integral:0,
				left_integral:0,
				ordermoney:0
			}
		},
		onLoad(options) {
			
		},
		onShow() {
			if (this.$common.loginAuth(true)) {
				// this.$nextTick((r) => {
				// 	uni.startPullDownRefresh({})
					
				// })
				this.getInfo()
				this.list = []
				this.page = 1
				this.hasMore = true
				this.loading = false
				this.getList()
			}
		},
		methods: {
			showBonus(){
				uni.navigateTo({
					url: "/pages/member/been/past"
				})
			},
			getScrollH() {
				let sys = uni.getSystemInfoSync();
				let winHeight = sys.windowHeight;
				//console.log(winHeight)
				let _this = this
				// 计算scroll-view高度
				let query = uni.createSelectorQuery().in(_this);
				query.select('.top-box').boundingClientRect()
				query.selectViewport()
				query.exec(function(res) {
					//console.log(res)
					_this.scrollHeight = winHeight - res[0].bottom - 10 - 24
					_this.scrollHeight = _this.scrollHeight + 200
				})
			},
			getInfo() {
				this.$http
					.get('integral_info', {type:'weight'})
					.then((response) => {
						this.detail = response.data.data
					})
					.catch((response) => {
						console.log(response)
					})
			},
			getList() {
				if (this.hasMore) {
					this.loading = true
					this.$http
						.get('weight_exchange_log', {
							page: this.page
						})
						.then((response) => {
							let list = this.list
							if (response.data.data.length > 0) {
								list = list.concat(response.data.data)
							} else {
								this.hasMore = false
							}
							this.list = list
							this.page += 1
							this.loading = false
							
							uni.stopPullDownRefresh()
						})
						.catch((response) => {
							console.log(response)
							this.loading = false
							uni.stopPullDownRefresh()
						})
				}
			},
			getMore() {
				this.getList()
			},
		},
		onPullDownRefresh() {
			
		},
	}
</script>

<style>
	.whole-box{
		background-image: url(../../../static/new-back.png);
		background-size: 100% 100%;
		min-height: calc(100vh - 45px - 24rpx);
		padding: 12px 0;
	}
	.gold-black-box{
		padding: 12px 0;
		margin: 0 10rpx;
		/* border: 2rpx solid #999999; */
		/* border-radius: 30rpx; */
		display: flex;
		flex-direction: column;
		align-items: center;
		/* background-color: #FFF7D2; */
		
	}
	
	.new-top-box{
		/* margin-top: 25rpx; */
		width: 690rpx;
		height: 350rpx;
		/* border: 2rpx solid #999999; */
		border-radius: 30rpx;
		overflow: hidden;
		position: relative;
		/* background: -webkit-linear-gradient(left, #FFF7D2, #FFF7D2, #FFF4C5, #FFF4C5); */
		background-color: #ffffff;
		width: 90%;
		margin: 0 auto;
		margin-top: 10px;
	}
	.new-top-box .top-box-bg{
		width: 100%;
		height: 100%;
	}
	.new-top-box .top-box-content{
		width: 690rpx;
		/* height: 276rpx; */
		position: absolute;
		left: 0;
		top: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 30rpx;
		padding: 0 30rpx;
	}
	
	.gold-black-box .top-box{
		/* margin-top: 25rpx; */
		width: 690rpx;
		height: 276rpx;
		/* border: 2rpx solid #999999; */
		border-radius: 30rpx;
		overflow: hidden;
		position: relative;
		/* background: -webkit-linear-gradient(left, #FFF7D2, #FFF7D2, #FFF4C5, #FFF4C5); */
		background-color: #ffffff;
		width: 90%;
		margin: 0 auto;
		margin-top: 10px;
	}
	.top-box .top-box-bg{
		width: 100%;
		height: 100%;
	}
	.top-box .top-box-content{
		width: 690rpx;
		/* height: 276rpx; */
		position: absolute;
		left: 0;
		top: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 30rpx;
		padding: 0 30rpx;
	}
	.top-box-content .note-price{
		flex: 1;
		height: 102rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.new-top-box .note-price .note{
		font-size: 30rpx;
		/* font-weight: bold; */
		color: #FFA86D;
		text-align: center;
		
	}
	.new-top-box .note-price .price{
		font-size: 30rpx;
		/* font-weight: bold; */
		color: #000000;
		margin-top: 15px;
		text-align: center;
	}
	.note-price .note{
		font-size: 36rpx;
		font-weight: bold;
		color: #000000;
		/* text-align: center; */
		
	}
	.note-price .price{
		font-size: 50rpx;
		font-weight: bold;
		color: #000000;
		margin-top: 15px;
		/* text-align: center; */
	}
	.top-box-content .icon-gold-tixian{
		width: 92rpx;
		height: 106rpx;
		flex-shrink: 0;
		margin-left: 20rpx;
	}
</style>

<style>
	.gold-black-box .list{
		margin-top: 10px;
	}
	.list .my-data-box{
		margin-top: 20rpx;
		width: 660rpx;
		height: 200rpx;
		/* border: 2rpx solid #999999; */
		border-radius: 30rpx;
		overflow: hidden;
		position: relative;
		/* background: -webkit-linear-gradient(left, #FFF7D2, #FFF7D2, #FFF4C5, #FFF4C5); */
		background-color: #ffffff;
		
		
	}
	.list .my-data-box:first-child{
		margin-top: 0;
	}
	.my-data-box .my-data-box-bg{
		width: 100%;
		height: 100%;
	}
	.my-data-box .my-data-box-content{
		width: 690rpx;
		height: 200rpx;
		position: absolute;
		left: 0;
		top: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 40rpx;
	}

	.my-data-box-content .left-box{
		/* flex: 1; */
		display: flex;
		flex-direction: column;
		align-items: space-between;
	}
	.left-box .title{
		/* width: 	250rpx; */
		font-size: 34rpx;
		font-weight: bold;
		color: #000000;
		overflow: hidden;    
		/* text-overflow:ellipsis;    */
		white-space: nowrap;
	}
	.left-box .time{
		margin-top: 16rpx;
		font-size: 34rpx;
		color: #000000;
		/* width: 200px; */
	}
	.my-data-box-content .num{
		/* margin-left: -20rpx; */
		font-size: 40rpx;
		font-weight: bold;
		color: #FF0000;
		float: right;
		margin-right: 30px;
	}
	.my-data-box-content .num.up{
		color: #FB7483;
	}
	.item .num.down{
		color: #FB7483;
	}
	.text-sh{
		color: #FB7483;
	}
</style>